const dataCount = 10;
const networkList = {
    timeData:[],
};
const  discList = {
    timeData : [],
    readRate : [],
    writeRate : [],
}
const color = [
    [ '#00d887','rgba(0, 216, 135, 0.4)','rgba(0, 216, 135, 0.1)'],
    [ '#0184d5','rgba(1, 132, 213, 0.4)','rgba(1, 132, 213, 0.1)'],
    [ '#3B2667','rgba(188,120,236,0.4)','rgba(188,120,236, 0.1)'],
    [ '#F8D800','rgba(248,216,0, 0.4)','rgba(248,216,0, 0.1)'],
    [ '#EA5455','rgba(234,84,85, 0.4)','rgba(234,84,85, 0.1)'],
    [ '#32CCBC','rgba(50,204,188, 0.4)','rgba(50,204,188, 0.1)'],
    [ '#DE4313','rgba(222,67,19, 0.4)','rgba(222,67,19, 0.1)'],
    [ '#3CD500','rgba(60,213,0, 0.4)','rgba(60,213,0, 0.1)'],
    [ '#C346C2','rgba(195,70,194, 0.4)','rgba(195,70,194, 0.1)'],
    [ '#360940','rgba(54,9,64, 0.4)','rgba(54,9,64, 0.1)'],
]
templateViewInit = function () {
    jvm()
/*
    top.tools.ajax({
        url: '/jvm/info',
        type: 'POST',
        dataType: 'json',
        loading:false,
        successFun: function (res) {
            if (res.code == 200) {
                updateJvm(res.data);
            }
        }
    });*/

    startPolling(10000);
}

function startPolling(interval = 5000) {
    function poll() {
        top.tools.ajax({
            url: '/system/jvm/info',
            type: 'POST',
            dataType: 'json',
            loading:false,
            successFun: function (res) {
                if (res.code == 200) {
                    updateJvm(res.data);
                }
                setTimeout(poll, interval);
            }
        });
    }

    // 开始第一次轮询
    poll();
}



function jvm(){
    let jvmChart = echarts.init(document.querySelector("#jvm")); //.showLoading()
    let data = [];
    let option = {
        color: [
            "#28C76F",
            "#F8D800",
            "#e3e3e3",
            "#EA5455"
        ],
        series: [{
            name: 'JVM详情',
            type: 'pie',
            clockWise: true,
            radius: ['100%', '85%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false,
            data: data
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    jvmChart.setOption(option);
    jvmChart.showLoading();
}

function updateJvm(jvm){
    let jvmUsage = parseFloat(jvm.user).toFixed(2);
    let freeUsage = parseFloat(jvm.free).toFixed(2);
    let data = [{
        value: jvmUsage, name: '已用内存', itemStyle: {
            normal: {
                color: { // 完成的圆环的颜色
                    colorStops: [{
                        offset: 0,
                        color: '#00cefc' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#367bec' // 100% 处的颜色
                    }]
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
        }
    }, {name: "可用内存", value: freeUsage}];


    let echartsInstance = echarts.getInstanceByDom(document.querySelector("#jvm"));
    echartsInstance.setOption({
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>JVM内存总量: " + jvm.total + "<br/> "
                + "JVM最大可申请: " + jvm.max + "<br/>"
                + "已用内存："+jvm.user+"<br/>"
                + "空闲内存："+jvm.free+"<br/>",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        title: {
            text: 'JVM使用率 \n ' + jvm.usageRate,
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#1a1919',
                fontSize: '30'
            }
        },
        series: [{
            data: data
        }]
    });
    echartsInstance.hideLoading(); // 去除loading
}
